<template>
	<div class="body">
		<div class="title">
			<span>金融服务大屏可视化系统</span>
		</div>
		<div class="main">
			<div class="left">
				<div class="mapbg">
					<div class="map">
						<div class="name">
							<span class="shiyoulu">石油路街道</span>
							<span class="hualongqiao">化龙桥街道</span>
							<span class="daping">大坪街道</span>
							<span class="lianglukou">两路口街道</span>
							<span class="caiyuanba">菜园坝街道</span>
							<span class="shiyoulu">石油路街道</span>
							<span class="shangqingsi">上清寺街道</span>
							<span class="daxigou">大溪沟街道</span>
							<span class="qixinggang">七星岗街道</span>
							<span class="jiefangbei">解放碑街道</span>
							<span class="nanjimen">南纪门街道</span>
							<span class="chaotianmen">朝天门街道</span>
							<div class="arrowBlue arrow">
								<img src="../../assets/system-bluetop.png" alt="" />
								<img src="../../assets/system-bluebottom.png" alt="" />
							</div>
							<div class="arrowYellow arrow">
								<img src="../../assets/system-yellowtop.png" alt="" />
								<img src="../../assets/system-yellowbottom.png" alt="" />
							</div>
							<div
								class="timeout1"
								@mouseenter="handleMouseEnter(1)"
								@mouseleave="handleMouseLeave(1)"
							>
								<span>超时警告</span>
								<img src="../../assets/system-timeout.png" alt="" />
							</div>
							<div
								class="timeout2"
								@mouseenter="handleMouseEnter(2)"
								@mouseleave="handleMouseLeave(2)"
							>
								<span>超时警告</span>
								<img src="../../assets/system-timeout.png" alt="" />
							</div>
							<div
								class="timeout3"
								@mouseenter="handleMouseEnter(3)"
								@mouseleave="handleMouseLeave(3)"
							>
								<span>超时警告</span>
								<img src="../../assets/system-timeout.png" alt="" />
							</div>
							<div class="warn" v-if="show">
								<span class="warnTitle">{{ dataList.title }}</span>
								<span class="warnSmTitle1">放贷笔数</span>
								<span class="warnSmTitle2">进行任务量</span>
								<span class="warnCont1">{{ dataList.warn }}</span>
								<span class="warnCont2">{{ dataList.assign }}</span>
							</div>
						</div>
					</div>
					<div class="data">
						<ul>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>机构数量</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>用户数量</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>累计授信数</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>累计授信金额(万)</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
						</ul>
						<ul>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>申请总量</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>累计申请金额(万)</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>累计放贷笔数</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
							<li>
								<div>
									<img src="../../assets/system-textbg.png" />
									<span>累计放款金额(万)</span>
								</div>
								<div>
									<span>455</span>
									<span>+55</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="bank">
						<div class="title1">
							<img src="../../assets/system-icon1.png" alt="" />
							<span>各银行处理效率</span>
						</div>
						<div class="bankMain">
							<div class="everyBank">
								<div class="everyBankTitle">
									<span>重庆银行</span>
									<p>{{ bank1 }}<span>%</span></p>
								</div>
								<div class="progress">
									<div
										class="progressTop"
										:style="{ width: bank1 + '%' }"
									></div>
								</div>
							</div>
							<div class="everyBank">
								<div class="everyBankTitle">
									<span>重庆建设银行</span>
									<p>{{ bank2 }}<span>%</span></p>
								</div>
								<div class="progress">
									<div
										class="progressTop"
										:style="{ width: bank2 + '%' }"
									></div>
								</div>
							</div>
							<div class="everyBank">
								<div class="everyBankTitle">
									<span>重庆工商银行</span>
									<p>{{ bank3 }}<span>%</span></p>
								</div>
								<div class="progress">
									<div
										class="progressTop"
										:style="{ width: bank3 + '%' }"
									></div>
								</div>
							</div>
							<div class="everyBank">
								<div class="everyBankTitle">
									<span>重庆邮政银行</span>
									<p>{{ bank4 }}<span>%</span></p>
								</div>
								<div class="progress">
									<div
										class="progressTop"
										:style="{ width: bank4 + '%' }"
									></div>
								</div>
							</div>
							<div class="everyBank">
								<div class="everyBankTitle">
									<span>重庆农业银行</span>
									<p>{{ bank5 }}<span>%</span></p>
								</div>
								<div class="progress">
									<div
										class="progressTop"
										:style="{ width: bank5 + '%' }"
									></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mapBottom">
					<div class="mapBottomLeft">
						<div class="smTitle">
							<span>实时动态</span>
						</div>
						<div class="mapBottomLeft_main">
							<div class="mapBottomLeft_main_left">
								<div class="mapBottomLeft_main_left_title">
									<div>
										<img src="../../assets/system-company.png" />
										<span>重庆佘斌科技有限公司</span>
									</div>
									<img
										src="../../assets/system-bottomtitleicon.png"
										class="success"
									/>
									<span class="successText">已受理</span>
								</div>
								<div class="mapBottomLeft_main_left_bottom">
									<div class="productname">
										<div class="productname_title">贷款产品:</div>
										<div class="productname_content">复工贷</div>
									</div>
									<div class="producttime">
										<div class="productname_title">申贷时间:</div>
										<div class="productname_content">2022-05-01 16:01</div>
									</div>
									<div class="personname">
										<div class="productname_title">
											法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人:
										</div>
										<div class="productname_content">果仁</div>
									</div>
									<div class="money">
										<div class="productname_title">贷款金额:</div>
										<div class="productname_content">500-800万</div>
									</div>
								</div>
							</div>
							<div class="mapBottomLeft_main_left">
								<div class="mapBottomLeft_main_left_title">
									<div>
										<img src="../../assets/system-company.png" />
										<span>重庆佘斌科技有限公司</span>
									</div>
									<img
										src="../../assets/system-bottomtitleicon1.png"
										class="success"
									/>
									<span class="successText1">待受理</span>
								</div>
								<div class="mapBottomLeft_main_left_bottom">
									<div class="productname">
										<div class="productname_title">贷款产品:</div>
										<div class="productname_content">复工贷</div>
									</div>
									<div class="producttime">
										<div class="productname_title">申贷时间:</div>
										<div class="productname_content">2022-05-01 16:01</div>
									</div>
									<div class="personname">
										<div class="productname_title">
											法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人:
										</div>
										<div class="productname_content">果仁</div>
									</div>
									<div class="money">
										<div class="productname_title">贷款金额:</div>
										<div class="productname_content">500-800万</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mapBottomRight">
						<div class="smTitle">
							<span>申款趋势</span>
						</div>
						<div class="mapBottomRightBottom">
							<div class="echarTitle">
								<div>
									<img src="../../assets/system-icon1.png" />
									<span>申贷金额趋势</span>
								</div>
								<span class="unit">单位:万</span>
							</div>
							<div class="echarTitle">
								<div>
									<img src="../../assets/system-icon1.png" />
									<span>申贷数量趋势</span>
								</div>
								<span class="unit">单位:万</span>
							</div>
						</div>
						<div class="echar">
							<Chart1></Chart1>
							<Chart2></Chart2>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="feedback">
					<div class="smTitle">
						<span>反馈情况</span>
					</div>
					<div class="feedbackMain">
						<div class="feedbackMainBg">
							<div class="feedbackMainBg_left">
								<div class="feedbackMainBg_left_title">初审情况</div>
								<div class="feedbackMainBg_left_main">
									<div>
										<p>123123</p>
										<p>初审数量</p>
									</div>
									<div>
										<p>5324</p>
										<p>初审未处理数</p>
									</div>
									<div>
										<p>0.5天</p>
										<p>平均反馈时长</p>
									</div>
								</div>
							</div>
							<img src="../../assets/system-round1.png" />
							<p class="percent">98<span>%</span></p>
						</div>
						<div class="feedbackMainBg">
							<div class="feedbackMainBg_left">
								<div class="feedbackMainBg_left_title">初审情况</div>
								<div class="feedbackMainBg_left_main">
									<div>
										<p>123123</p>
										<p>初审数量</p>
									</div>
									<div>
										<p>5324</p>
										<p>初审未处理数</p>
									</div>
									<div>
										<p>0.5天</p>
										<p>平均反馈时长</p>
									</div>
								</div>
							</div>
							<img src="../../assets/system-round3.png" />
							<p class="percent">98<span>%</span></p>
						</div>
						<div class="feedbackMainBg">
							<div class="feedbackMainBg_left">
								<div class="feedbackMainBg_left_title">初审情况</div>
								<div class="feedbackMainBg_left_main">
									<div>
										<p>123123</p>
										<p>初审数量</p>
									</div>
									<div>
										<p>5324</p>
										<p>初审未处理数</p>
									</div>
									<div>
										<p>0.5天</p>
										<p>平均反馈时长</p>
									</div>
								</div>
							</div>
							<img src="../../assets/system-round2.png" />
							<p class="percent">98<span>%</span></p>
						</div>
					</div>
				</div>
				<div class="trend">
					<div class="smTitle">
						<span>放贷趋势</span>
					</div>
					<div class="trendMain">
						<div class="trendMainTop">
							<div class="echarTitle">
								<div>
									<img src="../../assets/system-icon1.png" />
									<span>放贷数量趋势</span>
								</div>
								<span class="unit">单位:万</span>
							</div>
							<Chart3></Chart3>
						</div>
						<div class="trendMainBottom">
							<div class="echarTitle">
								<div>
									<img src="../../assets/system-icon1.png" />
									<span>放贷数量趋势</span>
								</div>
								<span class="unit">单位:万</span>
							</div>
							<Chart4></Chart4>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Return></Return>
		<!-- <Round></Round> -->
	</div>
</template>

<script setup lang="ts">
import Chart1 from "./components/chart1.vue";
import Chart2 from "./components/chart2.vue";
import Chart3 from "./components/chart3.vue";
import Chart4 from "./components/chart4.vue";
import Return from "./components/return.vue";
import Round from "./components/round.vue";
import { ref, reactive } from "vue";
let bank1 = ref("95");
let bank2 = ref("92");
let bank3 = ref("78");
let bank4 = ref("90");
let bank5 = ref("86");
let show = ref(false);
const warnList = ref([
	{
		title: "重庆银行",
		warn: 4631,
		assign: 1431,
	},
	{
		title: "重庆建设银行",
		warn: 6424,
		assign: 2313,
	},
	{
		title: "重庆工商银行",
		warn: 4513,
		assign: 2412,
	},
]);
interface dataListType {
	title: string;
	warn: number;
	assign: number;
}
let dataList = reactive<dataListType>({
	title: "",
	warn: 0,
	assign: 0,
});
const handleMouseEnter = (index: number) => {
	dataList = warnList.value[index - 1];
	show.value = !show.value;
};
const handleMouseLeave = (index: number) => {
	show.value = !show.value;
};
</script>

<style scoped lang="scss">
.body {
	width: 100%;
	height: 100%;
	background: url(../../assets/system-bg.png) no-repeat 0 0 / cover;
	padding: 0;
	padding-left: 10px;
}
.title {
	height: 40px;
}
.title span {
	font-size: 30px;
	color: #fff;
	font-family: "庞门正道标题体3.0";
}
.main {
	height: calc(100vh - 40px);
	display: flex;
}
.left {
	width: 1480px;
	height: 100%;
	display: flex;
	flex-direction: column;
	.mapbg {
		height: 700px;
		// background-color: blue;
		background: url(../../assets/system-mapbg.png) no-repeat 0 0 / cover;
		display: flex;
		align-items: center;
		position: relative;

		.bank {
			width: 20%;
			height: 50%;
			// background-color: pink;
			position: absolute;
			right: 20px;
			bottom: 20px;
			display: flex;
			flex-direction: column;
			.title1 {
				margin-bottom: 15px;
			}
			.bankMain {
				height: 100%;
				display: flex;
				flex-direction: column;

				.everyBank {
					height: 20%;
					margin-bottom: 10px;
					display: flex;
					flex-direction: column;
					.everyBankTitle {
						height: 18px;
						display: flex;
						justify-content: space-between;
						font-size: 12px;
						line-height: 1;
						span {
							color: rgba($color: #fff, $alpha: 0.6);
						}
						p {
							color: #119dab;
							font-size: 14px;
							span {
								font-size: 12px;
							}
						}
					}
					.progress {
						height: 80%;
						background: url(../../assets/system-progressbgd.png) no-repeat 0 0 /
							cover;
						position: relative;
						.progressTop {
							position: absolute;
							top: 0;
							left: 0;
							height: 100%;
							background: url(../../assets/system-progresstop.png) no-repeat 0 0 /
								cover;
						}
					}
				}
			}
			.title1 {
				display: flex;
				line-height: 14px;
				span {
					font-size: 12px;
					color: #fff;
					opacity: 0.9;
				}
				img {
					margin-right: 8px;
					width: 14px;
					height: 14px;
				}
			}
		}
		.map {
			width: 950px;
			height: 380px;
			margin-top: 50px;
			background: url(../../assets/system-map.png) no-repeat 0 24px /90%;
			position: relative;
			.name > span {
				color: rgba($color: #fff, $alpha: 0.9);
				font-size: 12px;
				text-shadow: 0 2px 3px #2478e4;
			}
			.name {
				position: relative;
				.warn {
					width: 220px;
					height: 110px;
					background: url(../../assets/sysytem-warnbg.png) no-repeat 0 0 / cover;
					position: absolute;
					top: 20px;
					left: 60px;
					.warnTitle {
						color: #fff;
						display: block;
						margin-top: 12px;
						margin-left: 12px;
						font-size: 12px;
					}
					.warnSmTitle1 {
						color: #38639b;
						font-size: 12px;
						position: relative;
						top: 16px;
						left: 32px;
					}
					.warnSmTitle2 {
						color: #38639b;
						font-size: 12px;
						position: relative;
						top: 16px;
						left: 81px;
					}
					.warnCont1 {
						color: #18fefe;
						font-size: 14px;
						font-weight: bold;
						position: relative;
						top: 41px;
						left: -76px;
					}
					.warnCont2 {
						color: #18fefe;
						font-size: 14px;
						font-weight: bold;
						position: relative;
						top: 41px;
						left: -18px;
					}
				}
				.timeout1 {
					width: 60px;
					position: absolute;
					top: 105px;
					left: 312px;
					span {
						position: absolute;
						left: 11px;
						top: 4px;
						color: rgba($color: #fff, $alpha: 0.9);
						font-size: 12px;
					}
					img {
						width: 70px;
					}
					cursor: pointer;
				}
				.timeout2 {
					width: 60px;
					position: absolute;
					top: 153px;
					left: 165px;
					cursor: pointer;
					span {
						position: absolute;
						left: 11px;
						top: 4px;
						color: rgba($color: #fff, $alpha: 0.9);
						font-size: 12px;
					}
					img {
						width: 70px;
					}
				}
				.timeout3 {
					cursor: pointer;
					width: 60px;
					position: absolute;
					top: 121px;
					left: 459px;
					span {
						position: absolute;
						left: 11px;
						top: 4px;
						color: rgba($color: #fff, $alpha: 0.9);
						font-size: 12px;
					}
					img {
						width: 70px;
					}
				}
				.arrow {
					display: flex;
					flex-direction: column;
					width: 16px;
					img:last-of-type {
						margin-top: 4px;
					}
				}
				.arrowBlue {
					position: absolute;
					right: 634px;
					top: 215px;
				}
				.arrowYellow {
					position: absolute;
					right: 696px;
					top: 137px;
				}
				.chaotianmen {
					position: absolute;
					right: 121px;
					top: 130px;
				}
				.jiefangbei {
					position: absolute;
					right: 218px;
					top: 140px;
				}
				.nanjimen {
					position: absolute;
					right: 224px;
					top: 198px;
				}
				.qixinggang {
					position: absolute;
					right: 301px;
					top: 152px;
				}
				.caiyuanba {
					position: absolute;
					right: 384px;
					top: 184px;
				}
				.shangqingsi {
					position: absolute;
					right: 435px;
					top: 101px;
				}
				.lianglukou {
					position: absolute;
					right: 492px;
					top: 187px;
				}
				.daxigou {
					position: absolute;
					right: 326px;
					top: 103px;
				}
				.hualongqiao {
					position: absolute;
					right: 624px;
					top: 165px;
				}
				.daping {
					position: absolute;
					right: 628px;
					top: 257px;
				}
				.shiyoulu {
					position: absolute;
					right: 767px;
					top: 222px;
				}
			}
		}
		.data {
			width: 500px;
			height: 110px;
			position: absolute;
			// background-color: pink;
			padding-left: 20px;
			box-sizing: border-box;
			top: 20px;
			right: 20px;
			ul {
				list-style: none;
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: space-around;
				padding: 0;
				margin: 0;
				margin-bottom: 10px;
				li {
					width: 25%;
					height: 50%;
					display: flex;
					flex-direction: column;
					div {
						img {
							width: 120px;
							height: 25px;
						}
					}
					div:first-of-type {
						position: relative;
						span {
							position: absolute;
							top: 0;
							left: 0;
							color: #5a96df;
							font-size: 12px;
							line-height: 25px;
							margin-left: 6px;
						}
					}
					div:last-of-type {
						margin-left: 12px;
						margin-top: 2px;
						span:first-of-type {
							color: #fff;
							font-size: 18px;
						}
						span:last-of-type {
							color: #18f9fa;
							font-size: 12px;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	.mapBottom {
		height: 360px;
		display: flex;
		.mapBottomLeft {
			width: 50%;
			// background-color: red;
			padding: 20px;
			box-sizing: border-box;
			padding-right: 10px;
			padding-left: 0;
			padding-bottom: 0;
			display: flex;
			flex-direction: column;
			.smTitle {
				height: 30px;
				background: url(../../assets/system-title.png) no-repeat 0 0 / cover;
				span {
					color: rgba($color: #fff, $alpha: 0.9);
					margin-left: 40px;
					line-height: 30px;
					font-weight: 600;
					font-size: 14px;
				}
			}
			.mapBottomLeft_main {
				height: 100%;
				display: flex;
				padding-left: 30px;
				box-sizing: border-box;
				.mapBottomLeft_main_left {
					width: 50%;
					margin-right: 30px;
					background: url(../../assets/system-bottombg.png) no-repeat 0 0 / 150%;
					display: flex;
					flex-direction: column;
					.mapBottomLeft_main_left_title {
						color: rgba($color: #fff, $alpha: 0.9);
						display: flex;
						height: 60px;
						justify-content: space-between;
						align-items: center;
						position: relative;
						width: 100%;
						div {
							display: flex;
							align-items: center;
							img {
								width: 20px;
								margin-right: 8px;
							}
							span {
								font-size: 14px;
							}
						}
						.success {
							width: 60px;
							margin-right: 6px;
						}
						.successText {
							color: #18fefe;
							position: absolute;
							right: 8px;
							top: 13px;
							font-size: 12px;
						}
						.successText1 {
							color: #ffbc0f;
							position: absolute;
							right: 8px;
							top: 13px;
							font-size: 12px;
						}
					}
					.mapBottomLeft_main_left_bottom {
						width: 100%;
						height: 100%;
						padding: 10px;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 12px;
						.productname_title {
							color: #3869a2;
							margin-right: 15px;
						}
						.productname_content {
							color: #5792da;
						}
						.productname {
							width: 100%;
							line-height: 20px;
							background: url(../../assets/system-bottombg1.png);
							padding: 0px 10px;
							box-sizing: border-box;
							display: flex;
						}
						.producttime {
							width: 100%;
							line-height: 20px;
							background: url(../../assets/system-bottombg1.png);
							padding: 0px 10px;
							box-sizing: border-box;
							display: flex;
						}
						.personname {
							width: 100%;
							line-height: 20px;
							background: url(../../assets/system-bottombg1.png);
							padding: 0px 10px;
							box-sizing: border-box;
							display: flex;
						}
						.money {
							width: 100%;
							line-height: 50px;
							background: url(../../assets/system-bottombg1.png);
							padding: 0px 10px;
							box-sizing: border-box;
							display: flex;
							.productname_title {
								color: #fff;
								opacity: 0.6;
							}
							.productname_content {
								color: #fbffff;
								font-weight: bold;
								font-size: 16px;
							}
						}
					}
				}
				.mapBottomLeft_main_right {
					width: 50%;
					background: url(../../assets/system-bottombg.png) no-repeat 0 0 / 150%;
				}
			}
		}
		.mapBottomRight {
			width: 50%;
			// background-color: blue;
			padding: 20px;
			padding-right: 0;
			padding-left: 10px;
			padding-bottom: 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.smTitle {
				height: 30px;
				background: url(../../assets/system-title.png) no-repeat 0 0 / cover;
				span {
					color: rgba($color: #fff, $alpha: 0.9);
					margin-left: 40px;
					line-height: 30px;
					font-weight: 600;
					font-size: 14px;
				}
			}
			.mapBottomRightBottom {
				display: flex;
				padding-right: 15px;
				box-sizing: border-box;
			}
			.echar {
				width: 100%;
				height: 100%;
				display: flex;
				position: relative;
				.echarLeft {
					width: 50%;
					height: 100%;
					position: absolute;
					top: -60px;
					left: 20px;
				}
				.echarRight {
					width: 50%;
					height: 100%;
					position: absolute;
					top: -60px;
					right: -20px;
				}
			}
			.echarTitle {
				display: flex;
				align-items: center;
				line-height: 44px;
				justify-content: space-between;
				width: 50%;
				margin-left: 15px;
				.unit {
					font-size: 12px;
					color: #476d94;
				}
				div {
					color: #fff;
					opacity: 0.8;
					img {
						width: 15px;
						line-height: 1;
						margin-right: 8px;
					}
					div {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
}

.right {
	width: 480px;
	height: 100%;
	display: flex;
	flex-direction: column;
	.feedback {
		height: 39.4%;
		display: flex;
		flex-direction: column;
		.smTitle {
			height: 30px;
			background: url(../../assets/system-title1.png) no-repeat 0 0 / cover;
			span {
				color: #fff;
				font-weight: bold;
				margin-left: 30px;
				line-height: 30px;
			}
		}
		.feedbackMain {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 10px 0;
			box-sizing: border-box;
			.feedbackMainBg {
				width: 100%;
				height: 100%;
				margin-bottom: 10px;
				background: url(../../assets/sysyte-feedback3.png) no-repeat 0 0 / cover;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				.percent {
					position: absolute;
					right: 13px;
					top: 17px;
					color: #fff;
					font-size: 20px;
					font-weight: 0;
					margin: 0;
					span {
						font-size: 12px;
						font-weight: 100;
						color: #aab4c1;
					}
				}
				.feedbackMainBg_left {
					width: 74%;
					height: 100%;
					padding: 5px 0;
					padding-left: 20px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					color: #fff;
					opacity: 0.9;
					.feedbackMainBg_left_title {
						height: 20px;
						font-size: 13px;
						color: #fff;
						opacity: 0.9;
					}
					.feedbackMainBg_left_main {
						display: flex;
						justify-content: space-between;
						div {
							p {
								margin: 0;
								line-height: 1;
								margin-top: 4px;
								color: #9b9fa5;
								font-size: 13px;
							}
							p:first-of-type {
								font-weight: bold;
							}
							p:last-of-type {
								color: #69707b;
							}
						}
					}
				}
				img {
					width: 60px;
					height: 60px;
				}
			}
			.feedbackMainBg:first-of-type {
				background: url(../../assets/sysyte-feedback2.png) no-repeat 0 0 / cover;
			}
			.feedbackMainBg:last-of-type {
				margin-bottom: 0;
				background: url(../../assets/sysyte-feedback1.png) no-repeat 0 0 / cover;
			}
		}
	}
	.trend {
		flex: 1;
		display: flex;
		flex-direction: column;
		.smTitle {
			height: 30px;
			background: url(../../assets/system-title1.png) no-repeat 0 0 / cover;
			span {
				color: #fff;
				font-weight: bold;
				margin-left: 30px;
				line-height: 30px;
			}
		}
		.trendMain {
			display: flex;
			flex-direction: column;
			height: 100%;
			.trendMainTop {
				height: 50%;
				display: flex;
				flex-direction: column;
				.echarTop {
					height: 100%;
				}
			}
			.trendMainBottom {
				height: 50%;
				display: flex;
				flex-direction: column;
				.echarBottom {
					height: 100%;
				}
			}
		}
		.echarTitle {
			display: flex;
			align-items: center;
			line-height: 44px;
			justify-content: space-between;
			margin-left: 15px;
			padding-right: 15px;
			box-sizing: border-box;
			.unit {
				font-size: 12px;
				color: #476d94;
			}
			div {
				color: #fff;
				opacity: 0.8;
				img {
					width: 15px;
					line-height: 1;
					margin-right: 8px;
				}
				div {
					display: flex;
					align-items: center;
				}
			}
		}
	}
}
</style>
